 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML >
<html>
<head>
<base href="<%=basePath%>">

<title>头条</title>
<title></title>
<link rel="stylesheet" type="text/css" href="myone/result.css" />
<link rel="stylesheet" type="text/css" href="css/result.css" />
<link rel="stylesheet" type="text/css" href="css/style/home.css" />

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

	
	<div class="home_top theme_div_color">

		<ul class="float_left">
			<li><a href="#">下载APP</a>
			</li>
			<li class="no_right_border"><a href="#">深圳&nbsp;&nbsp;&nbsp;&nbsp;多云&nbsp;&nbsp;&nbsp;&nbsp;28°</a>
			</li>
		</ul>

		<ul class="float_right">
			<li class="theme_ui_color"><a href="jsp/login.jsp">登录</a>
			</li>
			<li><a href="#">反馈</a>
			</li>
			<li><a href="#">侵权投诉</a>
			</li>
			<li class="no_right_border"><a href="#">头条产品</a>
			</li>
		</ul>
		<div class="clear_float"></div>
	</div>

	<div class="theme_center_div margin_top_40">
		<div class="left_nav float_left">
			<dl>
				<dt>
					<a href="#"><img src="img/log/logo_plain_text.png" /> </a>
				</dt>
				<dd class="selected">
					<a href="#">推荐</a>
				</dd>
				<c:forEach items="${categoryList }" var="type">
					<dd>
						<a href="#" var="${type.id }">${type.category_name }</a>
					</dd>
				</c:forEach>
			</dl>

		</div>
		<%--分类 --%>
		<div class="center_content float_left margin_left_30">

			<div class="home_banner">
				<dl>
					<dt>
						<ul class="theme_div_color">
							<li>要闻</li>
							<li>社会</li>
							<li>娱乐</li>
							<li>体育</li>
							<li>军事</li>
							<li>明星</li>
						</ul>
					</dt>
					<dd>
						<a href="#" name="news_title"> <img src="img/banner/banner_04.jpg" name="banner" />
							<div class="news_title">阿森纳发布新赛季客场球衣 新援拉卡泽特亮相</div> </a>
					</dd>
				</dl>
				<div class="clear_float"></div>
			</div>
			<%--END 分类 --%>

			<div class="msg">
				<div class="btn_div">这里是提示未读</div>
				<div class="close float_right">
					<img src="img/ico/icon_close_write.png" />
				</div>
				<div class="clear_float"></div>
			</div>

			<!--
                	作者：452685609@qq.com
                	时间：2017-07-14
                	描述：中间的新闻列表
                -->
			<div class="content_list">

				<%--新闻展示 --%>
				<div class="content">
					<c:forEach items="${newList }" var="n">
						<dl>
							<dt>
								<a href="newsAction?action=findById&id=${n.id }"><img src="${n.tilte_img }" /> </a>
							</dt>
							<dd class="news_title">
								<a href="newsAction?action=findById&id=${n.id }">${n.title }</a>
							</dd>
							<dd class="news_detail">
								<div class="news_type float_left">
									<a href="#" name="newsType">${n.category_name }</a>
								</div>
								<ul class="float_left detail" name="newsTitle">
									<li><c:if test="${empty  n.user_img}">
											<img src="img/upload/user/toux.jpg"></img>
										</c:if> <c:if test="${not empty  n.user_img}">
											<a href="#"><img src="${n.user_img }" /> </a>
										</c:if></li>
									<li><a href="#">${n.user_name }</a>
									</li>
									<li>·</li>
									<li><a href="#">${n.comment_number }</a>
									</li>
									<li>·</li>
									<li><fm:formatDate value="${ n.create_time}" pattern="yyyy-MM-dd" /></li>
								</ul>
								<div class="close float_right">
									<img src="img/ico/icon_close_gray.png" style="width: 16px;" />
								</div>
							</dd>
						</dl>
						<div class="clear_float"></div>
					</c:forEach>
				</div>
				<%-- END新闻展示 --%>
			</div>
			<div class="clear_float"></div>

		</div>

		<!--
            	作者：bai
            	时间：2017-07-15
            	描述：右边部分
            -->
		<div class="right_expand  float_right">

			<div class="search border_E8 right_div_color">
				<form action="#" method="post">
					<input type="text" name="search" class="search_input right_div_color" placeholder="大家都在搜" /> <input type="submit" class="search_btn right_div_color" value="" />
				</form>
			</div>
			<div class="right_theme_div right_theme_div_bgc">
				<div class="right_in_div">
					<div class="right_unit">
						<a href="#">
							<div class="hour_24news_picture float_left">
								<img src="img/log/report_logo.png" />
							</div>
							<div class="hour_24news_title float_left">
								<h3>网上有害信息举报专区</h3>
								<p>举报电话：123777</p>
							</div> </a>
						<div class="clear_float"></div>
					</div>
				</div>
			</div>

			<div class="right_theme_div right_theme_div_bgc border_top_2">
				<div class="right_in_div">
					<p class="right_title">24小时热闻</p>
					<div class="right_unit  border_bottom_E8">
						<a href="#" name="hourNews24">
							<div class="hour_24news_picture float_left">
								<img src="img/upload/index/24_hour_news.jpg" />
							</div>
							<div class="hour_24news_title float_left">港媒称辽宁舰回航驶离台湾海峡后 解放军演练出动"轰6"绕台一周</div> </a>
						<div class="clear_float"></div>
					</div>
				</div>
			</div>

			<div class="right_theme_div right_theme_div_bgc border_top_2">
				<div class="right_in_div">
					<p class="right_title">热门视频</p>
					<div class="right_unit">

						<a href="#" name="hotRadio">
							<div class="hot_radio_title float_left">
								<p>听音乐画场景！当外国人听到葫芦娃，他们会画出什么东西</p>
								<ul class="detail">
									<li><a href="#">233评论</a>
									</li>
									<li>·</li>
									<li>10分钟前</li>
								</ul>
							</div>
							<div class="hot_radio_picture float_left">
								<a href="#" name="hotRadio"><img src="img/upload/index/hot_radio_7.jpg" /> </a>
							</div> </a> <a href="#" name="hotRadio">
							<div class="hot_radio_title float_left">
								<p>听音乐画场景！当外国人听到葫芦娃，他们会画出什么东西</p>
								<ul class="detail">
									<li><a href="#">233评论</a>
									</li>
									<li>·</li>
									<li>10分钟前</li>
								</ul>
							</div>
							<div class="hot_radio_picture float_left">
								<img src="img/upload/index/hot_radio_1.jpg" />
							</div> </a> <a href="#" name="hotRadio">
							<div class="hot_radio_title float_left">
								<p>听音乐画场景！当外国人听到葫芦娃，他们会画出什么东西</p>
								<ul class="detail">
									<li><a href="#">233评论</a>
									</li>
									<li>·</li>
									<li>10分钟前</li>
								</ul>
							</div>
							<div class="hot_radio_picture float_left">
								<img src="img/upload/index/hot_radio_2.jpg" />
							</div> </a> <a href="#" name="hotRadio">
							<div class="hot_radio_title float_left">
								<p>听音乐画场景！当外国人听到葫芦娃，他们会画出什么东西</p>
								<ul class="detail">
									<li><a href="#">233评论</a>
									</li>
									<li>·</li>
									<li>10分钟前</li>
								</ul>
							</div>
							<div class="hot_radio_picture float_left">
								<img src="img/upload/index/hot_radio_3.jpg" />
							</div> </a>

						<div class="clear_float"></div>
					</div>
				</div>
			</div>


			<div class="right_theme_div right_theme_div_bgc border_top_2">
				<div class="right_in_div">
					<div id="">
						<p class="right_title">精彩图片</p>
					</div>
				</div>
				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_01.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>航班延误，12岁女孩候机厅跪地写作业，“当天的作业一定要当天完成”</p>
						</div> </a>

				</div>

				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_02.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>四位仁爱天使志愿者：用心服务，用爱暖人（图片集2）</p>
						</div> </a>
				</div>

				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_01.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>航班延误，12岁女孩候机厅跪地写作业，“当天的作业一定要当天完成”</p>
						</div> </a>

				</div>

				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_02.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>四位仁爱天使志愿者：用心服务，用爱暖人（图片集2）</p>
						</div> </a>
				</div>

				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_01.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>航班延误，12岁女孩候机厅跪地写作业，“当天的作业一定要当天完成”</p>
						</div> </a>

				</div>

				<div class="hot_picture_div float_left">
					<a href="#">
						<div class="hot_picture">
							<img src="img/upload/index/hot_picture_02.jpg" />
						</div>
						<div class="hot_picture_title">
							<p>四位仁爱天使志愿者：用心服务，用爱暖人（图片集2）</p>
						</div> </a>
				</div>


				<div class="clear_float"></div>

			</div>

			<div class="right_theme_div right_theme_div_bgc border_top_2">
				<div class="right_in_div">
					<p class="right_title">更多</p>

					<ul class="detail">
						<li><a href="#">关于头条</a>
						</li>
						<li><a href="#">加入头条</a>
						</li>
						<li><a href="#">媒体报道</a>
						</li>
						<li><a href="#">媒体合作</a>
						</li>
						<li><a href="#">产品合作</a>
						</li>
						<li><a href="#">合作说明</a>
						</li>
						<li><a href="#">广告投放</a>
						</li>
						<li><a href="#">联系我们</a>
						</li>
						<li><a href="#">用户协议</a>
						</li>
						<li><a href="#">侵权投诉</a>
						</li>
						<li><a href="#">廉洁举报</a>
						</li>
					</ul>
					<div class="clear_float"></div>
				</div>
			</div>

			<div class="right_theme_div right_theme_div_bgc border_top_2">
				<div class="right_in_div">
					<p class="right_title">友情链接</p>
					<ul class="detail">
						<li><a href="#">关于头条</a>
						</li>
						<li><a href="#">加入头条</a>
						</li>
						<li><a href="#">媒体报道</a>
						</li>
						<li><a href="#">媒体合作</a>
						</li>
						<li><a href="#">产品合作</a>
						</li>
						<li><a href="#">合作说明</a>
						</li>
						<li><a href="#">广告投放</a>
						</li>
						<li><a href="#">联系我们</a>
						</li>
						<li><a href="#">用户协议</a>
						</li>
						<li><a href="#">侵权投诉</a>
						</li>
						<li><a href="#">廉洁举报</a>
						</li>
					</ul>
					<div class="clear_float"></div>
				</div>
			</div>


			<div class="right_theme_div right_theme_div_bgc">
				<div class="right_in_div">
					<div class="copyright">


						<ul class="detail">
							<li><a href="#">&copy; 2017 今日头条</a>
							</li>
							<li><a href="#">中国互联网举报中心 京ICP证140141号</a>
							</li>
							<li><a href="#">京ICP备12025439号-3 网络文化经营许可证</a>
							</li>
							<li><a href="#">京-非经营性-2016-0081</a>
							</li>
							<li><a href="#">互联网药品信息服务资格证书</a>
							</li>
							<li><a href="#">跟帖评论自律管理承诺书</a>
							</li>
							<li><a href="#">违法和不良信息举报：010-58341833</a>
							</li>
							<li><a href="#">公司名称：北京字节跳动科技有限公司</a>
							</li>
						</ul>
						<div class="clear_float"></div>
					</div>
				</div>
			</div>


		</div>



		<div class="clear_float"></div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {

			//			  $("detail a").mouseover(function(){
			//			     $(this).css("color","#406599");
			//			  });
			//			  $("detail a").mouseout(function(){
			//			     $(this).css("color","#777777");
			//			  });
			//			  $("li.news_type a").mouseover(function(){
			//			     $(this).css("color","orange");
			//			  });
			//			  $("li.news_type a").mouseout(function(){
			//			     $(this).css("color","orange");
			//			  });
			//			  
			$(".msg .close img").click(function() {
				$(".msg").hide(1000);
			});

			$(".search_input").focusin(function() {
				$(".search").css("border-color", "#ed4040");
			});
			$(".search_input").focusout(function() {
				$(".search").css("border-color", "#E8E8E8");
			});

			window.onload = function() {
				var txt = document.getElementsByClassName("hot_picture_title");
				var textLeng = 30;
				for ( var i = 0; i < txt.length; i++) {
					str = txt[i].innerHTML;
					if (str.length > textLeng) {
						txt[i].innerHTML = str.substring(0, textLeng) + "...";
					}
				}

			}

		});
	</script>
</body>
</html>
